<template>
  <div class="profile-container">
    <div class="profile-content">
      <div class="profile-box">
        <div class="header-row">
          <a-button class="back-btn" @click="router.back()">
            <template #icon><LeftOutlined /></template>
            返回
          </a-button>
          <h2>个人中心</h2>
        </div>

        <a-tabs v-model:activeKey="activeTab">
          <!-- 基本信息 -->
          <a-tab-pane key="1" tab="基本信息" class="profile-tab">
            <!-- 头像区域 -->
            <div class="avatar-row">
              <!-- 刷新按钮 -->
              <a-tooltip :title="refreshTooltip">
                <a-button
                  class="avatar-refresh-btn"
                  type="link"
                  size="small"
                  :disabled="isRefreshDisabled"
                  @click="handleRefreshAvatars"
                >
                  <SyncOutlined :spin="refreshing" style="font-size: 16px; color: #1890ff" />
                </a-button>
              </a-tooltip>

              <!-- 当前头像 -->
              <div class="avatar-item current">
                <img :src="IMAGE_PREFIX + loginUserStore.loginUser.userAvatar" alt="当前头像" />
                <span class="avatar-label">当前头像</span>
              </div>

              <!-- 上传头像 -->
              <div class="avatar-item upload">
                <a-upload
                  name="file"
                  :show-upload-list="false"
                  :before-upload="beforeUpload"
                  class="upload-trigger"
                >
                  <PlusOutlined />
                  <span>上传头像</span>
                </a-upload>
              </div>

              <!-- AI头像选项 -->
              <div
                v-for="(avatar, index) in aiAvatars"
                :key="index"
                class="avatar-item ai"
                @click="selectAIAvatar()"
              >
                <img :src="avatar" alt="AI头像" />
              </div>
            </div>

            <!-- 用户名修改 -->
            <div class="info-section">
              <a-form-item>
                <a-input
                  v-model:value="userInfo.userName"
                  placeholder="请输入新的用户名"
                  size="large"
                  :maxLength="12"
                >
                  <template #prefix>
                    <UserOutlined style="color: rgba(0, 0, 0, 0.25)" />
                  </template>
                </a-input>
                <a-button type="primary" @click="updateUserName" class="update-btn">
                  更新用户名
                </a-button>
              </a-form-item>
            </div>

            <!-- 个人简介修改 -->
            <div class="info-section">
              <a-form-item>
                <a-textarea
                  v-model:value="userInfo.userProfile"
                  placeholder="介绍一下自己吧"
                  :rows="4"
                  :maxLength="200"
                />
                <a-button type="primary" @click="updateProfile" class="update-btn">
                  更新简介
                </a-button>
              </a-form-item>
            </div>
          </a-tab-pane>

          <!-- 修改密码 -->
          <a-tab-pane key="2" tab="修改密码" class="profile-tab">
            <a-form :model="passwordForm" layout="vertical">
              <a-form-item
                label="原密码"
                name="oldPassword"
                :rules="[{ required: true, message: '请输入原密码' }]"
              >
                <a-input-password v-model:value="passwordForm.oldPassword" size="large">
                  <template #prefix>
                    <LockOutlined style="color: rgba(0, 0, 0, 0.25)" />
                  </template>
                </a-input-password>
              </a-form-item>
              <a-form-item
                label="新密码"
                name="newPassword"
                :rules="[
                  { required: true, message: '请输入新密码' },
                  { min: 8, message: '密码长度不能小于8位' },
                ]"
              >
                <a-input-password v-model:value="passwordForm.newPassword" size="large">
                  <template #prefix>
                    <LockOutlined style="color: rgba(0, 0, 0, 0.25)" />
                  </template>
                </a-input-password>
              </a-form-item>
              <a-form-item>
                <a-button type="primary" @click="updatePassword" size="large" block>
                  修改密码
                </a-button>
              </a-form-item>
            </a-form>
          </a-tab-pane>

          <!-- 绑定邮箱 -->
          <a-tab-pane key="3" tab="绑定邮箱" class="profile-tab">
            <div class="email-section">
              <!-- 当前邮箱状态 -->
              <div class="current-email-status">
                <a-alert
                  v-if="!currentEmail"
                  message="温馨提示"
                  description="您还未绑定邮箱，绑定邮箱可以提高账号安全性"
                  type="warning"
                  show-icon
                />
                <a-alert
                  v-else
                  message="当前绑定邮箱"
                  :description="currentEmail"
                  type="success"
                  show-icon
                />
              </div>

              <!-- 邮箱修改表单 -->
              <a-form :model="emailForm" layout="vertical" style="margin-top: 24px">
                <a-form-item
                  label="新邮箱地址"
                  name="email"
                  :rules="[
                    { required: true, message: '请输入邮箱地址' },
                    { type: 'email', message: '请输入正确的邮箱格式' },
                  ]"
                >
                  <a-input
                    v-model:value="emailForm.email"
                    size="large"
                    placeholder="请输入新的邮箱地址"
                  >
                    <template #prefix>
                      <MailOutlined style="color: rgba(0, 0, 0, 0.25)" />
                    </template>
                  </a-input>
                </a-form-item>
                <a-form-item>
                  <a-button type="primary" @click="updateEmail" size="large" block>
                    {{ currentEmail ? '修改邮箱' : '绑定邮箱' }}
                  </a-button>
                </a-form-item>
              </a-form>
            </div>
          </a-tab-pane>
        </a-tabs>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { IMAGE_PREFIX } from '@/config/constants'
  import { ref, reactive, onMounted, computed, watch } from 'vue'
  import { message } from 'ant-design-vue'
  import {
    UserOutlined,
    LockOutlined,
    PlusOutlined,
    LeftOutlined,
    SyncOutlined,
    MailOutlined,
  } from '@ant-design/icons-vue'
  import { useLoginUserStore } from '@/stores/useLoginUserStore'
  import { useRouter } from 'vue-router'
  import {
    updateUserNameUsingPost1,
    updatePasswordUsingPost1,
    updateUserProfileUsingPost1,
    uploadAvatarUsingPost1,
    getUserEmailUsingGet1,
    updateUserEmailUsingPost1,
  } from '@/api/yonghumokuaijiekou'


  const loginUserStore = useLoginUserStore()
  const router = useRouter()

  // 当前激活的标签页
  const activeTab = ref('1')

  // 用户信息表单
  const userInfo = reactive({
    userName: '',
    userProfile: '',
  })

  // 密码修改表单
  const passwordForm = reactive({
    oldPassword: '',
    newPassword: '',
  })

  // AI头像生成
  const aiAvatars = ref<string[]>([])
  onMounted(() => {
    // 生成4个不同的AI头像
    const generateAvatars = () => {
      return Array(4)
        .fill(0)
        .map((_, index) => {
          const styles = [
            // 不同风格的卡通头像
            `https://avataaars.io/?avatarStyle=Circle&topType=LongHairMiaWallace&accessoriesType=Prescription02&hairColor=BrownDark&facialHairType=Blank&clotheType=Hoodie&clotheColor=PastelBlue&eyeType=Happy&eyebrowType=Default&mouthType=Smile&skinColor=Light`,
            `https://avataaars.io/?avatarStyle=Circle&topType=ShortHairDreads01&accessoriesType=Round&hairColor=Black&facialHairType=BeardMedium&facialHairColor=Black&clotheType=ShirtCrewNeck&clotheColor=Gray02&eyeType=Default&eyebrowType=RaisedExcited&mouthType=Twinkle&skinColor=DarkBrown`,
            `https://avataaars.io/?avatarStyle=Circle&topType=LongHairStraight&accessoriesType=Blank&hairColor=BlondeGolden&facialHairType=Blank&clotheType=BlazerShirt&clotheColor=PastelRed&eyeType=Surprised&eyebrowType=RaisedExcitedNatural&mouthType=Smile&skinColor=Pale`,
            `https://avataaars.io/?avatarStyle=Circle&topType=ShortHairShortCurly&accessoriesType=Kurt&hairColor=Red&facialHairType=Blank&clotheType=GraphicShirt&clotheColor=Heather&eyeType=Wink&eyebrowType=UnibrowNatural&mouthType=Default&skinColor=Tanned`,
          ]
          return styles[index] // 使用index来确保四个不同的头像
        })
    }

    // 初始化头像
    aiAvatars.value = generateAvatars()

    // 在页面加载时主动执行一次AI头像刷新
    handleRefreshAvatars()
    fetchUserEmail()
  })

  // AI头像刷新相关
  const refreshCount = ref(0)
  const refreshing = ref(false)
  const isRefreshDisabled = ref(false)
  const lastRefreshTime = ref(0)
  const REFRESH_LIMIT = 6
  const COOLDOWN_TIME = 5 * 60 * 1000 // 5分钟冷却时间

  // 刷新按钮提示文本
  const refreshTooltip = computed(() => {
    if (isRefreshDisabled.value) {
      const remainingTime = Math.ceil(
        (lastRefreshTime.value + COOLDOWN_TIME - Date.now()) / 1000 / 60
      )
      return `请等待 ${remainingTime} 分钟后再试`
    }
    return `刷新AI头像 (本次剩余${REFRESH_LIMIT - refreshCount.value}次)`
  })

  // 处理刷新
  const handleRefreshAvatars = async () => {
    if (Date.now() - lastRefreshTime.value < COOLDOWN_TIME) {
      message.warning('请稍后再试')
      return
    }
    if (refreshCount.value >= REFRESH_LIMIT) {
      isRefreshDisabled.value = true
      lastRefreshTime.value = Date.now()
      message.warning('刷新次数已达上限，请稍后再试')
      return
    }

    refreshing.value = true
    try {
      // 所有可能的头像配置
      const allStyles = [
        {
          topType: [
            'LongHairMiaWallace',
            'ShortHairDreads01',
            'LongHairStraight',
            'ShortHairShortCurly',
            'LongHairCurly',
          ],
          accessoriesType: ['Prescription02', 'Round', 'Blank', 'Kurt', 'Sunglasses'],
          hairColor: ['BrownDark', 'Black', 'BlondeGolden', 'Red', 'Auburn'],
          clotheType: ['Hoodie', 'ShirtCrewNeck', 'BlazerShirt', 'GraphicShirt', 'BlazerSweater'],
          clotheColor: ['PastelBlue', 'Gray02', 'PastelRed', 'Heather', 'Black'],
          eyeType: ['Happy', 'Default', 'Surprised', 'Wink', 'Side'],
          eyebrowType: [
            'Default',
            'RaisedExcited',
            'RaisedExcitedNatural',
            'UnibrowNatural',
            'SeriousNatural',
          ],
          mouthType: ['Smile', 'Twinkle', 'Serious', 'Default', 'Concerned'],
          skinColor: ['Light', 'DarkBrown', 'Pale', 'Tanned', 'Yellow'],
        },
      ]

      // 生成4个不重复的头像
      const newAvatars = Array(4)
        .fill(0)
        .map(() => {
          const style = allStyles[0]
          const randomConfig = {
            topType: style.topType[Math.floor(Math.random() * style.topType.length)],
            accessoriesType:
              style.accessoriesType[Math.floor(Math.random() * style.accessoriesType.length)],
            hairColor: style.hairColor[Math.floor(Math.random() * style.hairColor.length)],
            clotheType: style.clotheType[Math.floor(Math.random() * style.clotheType.length)],
            clotheColor: style.clotheColor[Math.floor(Math.random() * style.clotheColor.length)],
            eyeType: style.eyeType[Math.floor(Math.random() * style.eyeType.length)],
            eyebrowType: style.eyebrowType[Math.floor(Math.random() * style.eyebrowType.length)],
            mouthType: style.mouthType[Math.floor(Math.random() * style.mouthType.length)],
            skinColor: style.skinColor[Math.floor(Math.random() * style.skinColor.length)],
          }

          return `https://avataaars.io/?avatarStyle=Circle&topType=${randomConfig.topType}&accessoriesType=${randomConfig.accessoriesType}&hairColor=${randomConfig.hairColor}&clotheType=${randomConfig.clotheType}&clotheColor=${randomConfig.clotheColor}&eyeType=${randomConfig.eyeType}&eyebrowType=${randomConfig.eyebrowType}&mouthType=${randomConfig.mouthType}&skinColor=${randomConfig.skinColor}`
        })

      // 强制更新数组引用以触发视图更新
      aiAvatars.value = [...newAvatars]
      refreshCount.value++
      message.success('刷新成功')
    } catch {
      message.error('刷新失败，请稍后重试')
    } finally {
      refreshing.value = false
    }
  }

  // 选择并上传AI头像
  const selectAIAvatar = async () => {
    message.info('AI头像功能开发中，敬请期待')
    return
  }

  // 上传自定义头像
  const beforeUpload = async (file: File) => {
    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
    if (!isJpgOrPng) {
      message.error('只能上传JPG/PNG格式的图片!')
      return false
    }

    const isLt2M = file.size / 1024 / 1024 < 2
    if (!isLt2M) {
      message.error('图片大小不能超过2MB!')
      return false
    }

    try {
      // 调用上传头像接口
      const res = await uploadAvatarUsingPost1(file)
      if (res.data.code === 200) {
        message.success('头像上传成功')
        loginUserStore.fetchLoginUser()
      } else {
        message.error(res.data.message || '上传失败')
      }
    } catch (error: any) {
      message.error('上传失败: ' + error.message)
    }

    return false
  }

  // 更新用户名
  const updateUserName = async () => {
    if (!userInfo.userName.trim()) {
      message.error('用户名不能为空')
      return
    }

    try {
      const res = await updateUserNameUsingPost1({
        userName: userInfo.userName,
      })
      if (res.data.code === 200) {
        message.success('用户名更新成功')
        loginUserStore.fetchLoginUser()
        userInfo.userName = ''
      } else {
        message.error(res.data.message || '更新失败')
      }
    } catch (error: any) {
      message.error('更新失败: ' + error.message)
    }
  }

  // 更新个人简介
  const updateProfile = async () => {
    try {
      const res = await updateUserProfileUsingPost1({
        userProfile: userInfo.userProfile,
      })
      if (res.data.code === 200) {
        message.success('个人简介更新成功')
        loginUserStore.fetchLoginUser()
        userInfo.userProfile = ''
      } else {
        message.error(res.data.message || '更新失败')
      }
    } catch (error: any) {
      message.error('更新失败: ' + error.message)
    }
  }

  // 修改密码
  const updatePassword = async () => {
    try {
      const res = await updatePasswordUsingPost1({
        oldPassword: passwordForm.oldPassword,
        newPassword: passwordForm.newPassword,
      })
      if (res.data.code === 200) {
        message.success('密码修改成功')
        passwordForm.oldPassword = ''
        passwordForm.newPassword = ''
      } else {
        message.error(res.data.message || '修改失败')
      }
    } catch (error: any) {
      message.error('修改失败: ' + error.message)
    }
  }

  // 邮箱相关
  const currentEmail = ref('')
  const emailForm = reactive({
    email: '',
  })

  // 监听标签页切换
  watch(activeTab, newValue => {
    if (newValue === '3') {
      fetchUserEmail()
    }
  })

  // 获取用户邮箱
  const fetchUserEmail = async () => {
    try {
      const res = await getUserEmailUsingGet1()
      if (res.data?.code === 200) {
        currentEmail.value = res.data.data.data || ''
      }
    } catch {
      message.error('获取邮箱信息失败')
    }
  }

  // 更新邮箱
  const updateEmail = async () => {
    if (!emailForm.email) {
      message.error('请输入邮箱地址')
      return
    }

    try {
      const res = await updateUserEmailUsingPost1({
        email: emailForm.email,
      })
      if (res.data?.code === 200) {
        message.success(currentEmail.value ? '邮箱修改成功' : '邮箱绑定成功')
        currentEmail.value = emailForm.email
        emailForm.email = ''
        loginUserStore.fetchLoginUser()
      } else {
        message.error(res.data?.message || '操作失败')
      }
    } catch (error: any) {
      message.error('操作失败: ' + error.message)
    }
  }
</script>

<style scoped>
  .profile-container {
    height: 100vh; /* 设置固定高度为100vh */
    background: var(--theme-background);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0; /* 移除内边距 */
    transition: all 0.3s ease;
  }

  .profile-content {
    background: var(--theme-surface);
    border-radius: 8px;
    box-shadow: 0 2px 8px var(--theme-shadow);
    border: 1px solid var(--theme-border);
    width: 800px; /* 固定宽度 */
    height: 100vh; /* 设置为100%视窗高度 */
    padding: 32px;
    transition: all 0.3s ease;
  }

  .profile-tab {
    padding: 20px;
    height: calc(100vh - 150px); /* 减去头部、标签导航和padding的高度 */
    overflow-y: auto; /* 内容超出时显示滚动条 */
  }

  /* 美化滚动条 */
  .profile-tab::-webkit-scrollbar {
    width: 6px;
  }

  .profile-tab::-webkit-scrollbar-thumb {
    background-color: var(--theme-border);
    border-radius: 3px;
    transition: all 0.3s ease;
  }

  .profile-tab::-webkit-scrollbar-track {
    background-color: var(--theme-background);
    transition: all 0.3s ease;
  }

  .profile-box h2 {
    height: 50px; /* 固定标题高度 */
    font-size: 24px;
    font-weight: 500;
    color: var(--theme-text);
    text-align: center;
    flex: 1;
    transition: color 0.3s ease;
  }

  /* 修改密码表单居中显示 */
  .profile-tab :deep(.ant-form) {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    max-width: 400px;
    margin: 0 auto;
  }

  .avatar-row {
    display: flex;
    gap: 16px;
    margin-bottom: 32px;
    position: relative;
  }

  .avatar-item {
    width: 120px;
    height: 120px;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
  }

  .avatar-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .avatar-item.current {
    border: 2px solid var(--theme-primary);
    transition: all 0.3s ease;
  }

  .avatar-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.45);
    color: white;
    padding: 4px;
    font-size: 12px;
    text-align: center;
  }

  .avatar-item.upload {
    border: 1px dashed var(--theme-border);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    background: var(--theme-background);
  }

  .avatar-item.upload:hover {
    border-color: var(--theme-primary);
    background: var(--theme-background);
  }

  .upload-trigger {
    text-align: center;
    color: var(--theme-textSecondary);
    transition: color 0.3s ease;
  }

  .upload-trigger :deep(.anticon) {
    font-size: 24px;
    margin-bottom: 8px;
  }

  .avatar-item.ai {
    cursor: pointer;
    transition: all 0.3s;
  }

  .avatar-item.ai:hover {
    transform: scale(1.05);
  }

  .info-section {
    margin-bottom: 24px;
  }

  .update-btn {
    margin-top: 16px;
    width: 120px;
  }

  :deep(.ant-tabs-nav) {
    margin-bottom: 24px;
    background: var(--theme-surface);
    transition: all 0.3s ease;
  }

  :deep(.ant-tabs-tab) {
    font-size: 16px;
    color: var(--theme-text);
    transition: all 0.3s ease;
  }

  :deep(.ant-tabs-tab:hover) {
    color: var(--theme-primary);
  }

  :deep(.ant-tabs-tab-active) {
    color: var(--theme-primary);
  }

  :deep(.ant-tabs-ink-bar) {
    background: var(--theme-primary);
    transition: all 0.3s ease;
  }

  :deep(.ant-form-item:last-child) {
    margin-bottom: 0;
  }

  :deep(.ant-input-affix-wrapper) {
    padding: 8px 11px;
    background: var(--theme-surface);
    border-color: var(--theme-border);
    color: var(--theme-text);
    transition: all 0.3s ease;
  }

  :deep(.ant-input-affix-wrapper:hover) {
    border-color: var(--theme-primary);
  }

  :deep(.ant-input-affix-wrapper:focus) {
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
  }

  :deep(.ant-input) {
    background: var(--theme-surface);
    border-color: var(--theme-border);
    color: var(--theme-text);
    transition: all 0.3s ease;
  }

  :deep(.ant-input:hover) {
    border-color: var(--theme-primary);
  }

  :deep(.ant-input:focus) {
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
  }

  :deep(.ant-input::placeholder) {
    color: var(--theme-textSecondary);
  }

  :deep(.ant-input-password) {
    background: var(--theme-surface);
    border-color: var(--theme-border);
    color: var(--theme-text);
    transition: all 0.3s ease;
  }

  :deep(.ant-input-password:hover) {
    border-color: var(--theme-primary);
  }

  :deep(.ant-input-password:focus) {
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
  }

  :deep(.ant-textarea) {
    background: var(--theme-surface);
    border-color: var(--theme-border);
    color: var(--theme-text);
    transition: all 0.3s ease;
  }

  :deep(.ant-textarea:hover) {
    border-color: var(--theme-primary);
  }

  :deep(.ant-textarea:focus) {
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
  }

  :deep(.ant-textarea::placeholder) {
    color: var(--theme-textSecondary);
  }

  :deep(.ant-btn) {
    height: 40px;
    font-size: 14px;
    transition: all 0.3s ease;
  }

  :deep(.ant-btn-default) {
    background: var(--theme-surface);
    border-color: var(--theme-border);
    color: var(--theme-text);
  }

  :deep(.ant-btn-default:hover) {
    border-color: var(--theme-primary);
    color: var(--theme-primary);
  }

  :deep(.ant-btn-primary) {
    background: var(--theme-primary);
    border-color: var(--theme-primary);
    color: var(--theme-surface);
  }

  :deep(.ant-btn-primary:hover) {
    background: var(--theme-secondary);
    border-color: var(--theme-secondary);
    color: var(--theme-surface);
  }

  :deep(.ant-btn-link) {
    background: transparent;
    border-color: transparent;
    color: var(--theme-primary);
  }

  :deep(.ant-btn-link:hover) {
    background: transparent;
    border-color: transparent;
    color: var(--theme-secondary);
  }

  :deep(.ant-form-item-label > label) {
    color: var(--theme-text);
    transition: color 0.3s ease;
  }

  .header-row {
    display: flex;
    align-items: center;
    margin-bottom: 24px;
    position: relative;
  }

  .back-btn {
    position: absolute;
    left: 0;
    display: flex;
    align-items: center;
    font-size: 14px;
    background: var(--theme-surface);
    border-color: var(--theme-border);
    color: var(--theme-text);
    transition: all 0.3s ease;
  }

  .back-btn:hover {
    border-color: var(--theme-primary);
    color: var(--theme-primary);
  }

  .back-btn :deep(.anticon) {
    margin-right: 4px;
  }

  .avatar-refresh-btn {
    position: absolute;
    right: -10px;
    top: -25px;
    z-index: 1;
    transition: transform 0.3s ease;
    padding: 4px;
    background: transparent;
    border-color: transparent;
    color: var(--theme-primary);
  }

  .avatar-refresh-btn:not(:disabled):hover {
    transform: rotate(180deg);
    background: transparent;
    color: var(--theme-secondary);
  }

  .avatar-refresh-btn:disabled {
    background: transparent;
    border-color: transparent;
  }

  .avatar-refresh-btn:disabled :deep(.anticon) {
    color: var(--theme-textSecondary) !important;
  }

  .email-section {
    max-width: 400px;
    margin: 0 auto;
    padding-top: 40px;
  }

  .current-email-status {
    margin-bottom: 32px;
  }

  :deep(.ant-alert) {
    border-radius: 8px;
    padding: 16px 24px;
    background: var(--theme-surface);
    border-color: var(--theme-border);
    transition: all 0.3s ease;
  }

  :deep(.ant-alert-message) {
    color: var(--theme-text);
    font-size: 16px;
    margin-bottom: 8px;
    transition: color 0.3s ease;
  }

  :deep(.ant-alert-description) {
    color: var(--theme-textSecondary);
    font-size: 14px;
    transition: color 0.3s ease;
  }

  /* 深色主题下的特殊处理 */
  [data-theme="dark"] .avatar-label {
    background: rgba(255, 255, 255, 0.2);
    color: var(--theme-text);
  }

  [data-theme="dark"] .avatar-item.upload {
    background: var(--theme-background);
    border-color: var(--theme-border);
  }

  [data-theme="dark"] .avatar-item.upload:hover {
    background: var(--theme-background);
    border-color: var(--theme-primary);
  }

  /* 响应式设计 */
  @media (max-width: 768px) {
    .profile-content {
      width: 95%;
      padding: 20px;
    }
    
    .avatar-row {
      flex-wrap: wrap;
      gap: 12px;
    }
    
    .avatar-item {
      width: 100px;
      height: 100px;
    }
  }

  @media (max-width: 576px) {
    .profile-content {
      width: 100%;
      padding: 16px;
    }
    
    .avatar-item {
      width: 80px;
      height: 80px;
    }
    
    .profile-box h2 {
      font-size: 20px;
    }
  }
</style>
